<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			学生的姓名:{{student.name}}
			学生成绩:<input type="text" v-model="student.score" /><br />
			{{student.score}}<br />
			{{result}}
		</div>
		<script>
			var app = Vue.createApp({
				data() {
					return {
						"student":{
							"name":"张三",
							"score": 0,	
						},
						"result": ""
					}
				},
				watch: {
					// 如果坚挺的是一个对象，不是简单地变量，需要深度监听
					student:{						
						deep:true,
						handler(newVal,oldVal){
							console.log(newVal)
							if(newVal.score>=60)
							{
								this.result="及格"
							}
							else
							{
								this.result="不及格"
							}
						}
					}
				}
			});
			var vm = app.mount("#app")
		</script>



	</body>
</html>